
<script setup>

import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

// import { message } from 'ant-design-vue';

// const goods = ref({})
const route = useRoute()
const count = ref(1);

// onMounted(() => getGoods())
// const getGoods = async () => {
//     const res = await axios({
//         url: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/goods',
//         params: {
//             id: route.params.id
//         }
//     })
//     console.log(res.data.result);
//     goods.value = res.data.result
// }

const goods = ref({
    id: '1183010',
    salesCount: 1788,
    commentCount: 0,
    collectCount: 0,
    brand: {
        name: '传智自有品牌'
    },
    name: "龙凤玉环",
    picture: 'https://pic.imgdb.cn/item/6640b6ad0ea9cb14035bc4c9.png',
    price: "7900.00",
    oldprice: "9900.00",
    desc: "千年古物，万年传奇",
    details: {
        notices:"龙凤玉环作为一种珍贵的玉器，无论是在收藏、佩戴还是保养时，都需要特别注意以下几点：\
1. 防止碰撞：玉器质地细腻，容易受到撞击而破裂或损伤，因此在日常佩戴或存放时要避免与硬物碰撞。\
2. 避免强酸强碱：玉石对酸性或碱性物质较为敏感，长期接触可能会腐蚀其表面，影响光泽和质地。\
3. 防止高温：高温可能会导致玉石内部的矿物结构发生变化，影响其色泽和透明度，因此应避免长时间暴露在高温环境中。\
4. 定期清洁：龙凤玉环需要定期清洁以保持其光泽。清洁时应使用软布轻轻擦拭，避免使用刷子或粗糙的布料，以免划伤。\
5. 避免油脂：油脂可能会渗入玉石的微细孔隙中，影响其光泽和透明度。在佩戴或处理食物时应注意避免油脂污染。\
6. 妥善存放：在不佩戴龙凤玉环时，应将其存放在柔软的布袋或专用的珠宝盒中，避免与其他硬物混合存放，以免造成不必要的损伤。\
7. 了解真伪：由于市场上存在许多仿制品，购买龙凤玉环时应到信誉良好的商家购买，并尽量了解相关的鉴别知识，以免购买到假冒伪劣产品。\
8. 定期检查：定期检查龙凤玉环的镶嵌是否牢固，如有松动应及时修复，以免造成丢失。\
遵循上述注意事项，可以帮助您更好地保护和保养龙凤玉环，使其保持长久的光泽和美观。\
",
        details: "龙凤玉环是中国古代玉器中的一种，它通常由玉石雕刻而成，呈现出龙和凤的图案。在中国文化中，龙和凤都是非常重要的象征，代表着皇权和贵族的地位。龙代表皇帝，凤代表皇后，两者通常一起出现，象征着帝后的和谐与统治。\
    龙凤玉环的历史可以追溯到古代，尤其是在汉代和唐代，这种玉环被广泛使用，作为贵族和皇室成员的装饰品。这些玉环通常是由高品质的玉石制成，如和田玉，其雕刻工艺精湛，细节处理得非常精致。\
    龙凤玉环不仅在装饰上具有美观性，也在文化上具有重要的意义。它们通常被认为具有辟邪和保护主人的作用，因此在古代，人们常常将龙凤玉环作为护身符佩戴。此外，龙凤玉环也常被用作礼品，以表达敬意和祝福。\
    总的来说，龙凤玉环是中国古代玉器中的一种重要形式，它不仅在艺术上具有价值，也在文化上具有重要的意义。",
        pictures: ["https://pic.imgdb.cn/item/6640b6ad0ea9cb14035bc4c9.png", "https://pic.imgdb.cn/item/6640b6ad0ea9cb14035bc4ab.png", "https://pic.imgdb.cn/item/6640b6ad0ea9cb14035bc43b.png", "https://pic.imgdb.cn/item/6640b6ad0ea9cb14035bc43c.png"],
        properties: [
            { name: "尺寸", value: "直径10cm" },
            { name: "重量", value: "100g" },
            { name: "材质", value: "玉环" },
            { name: "颜色分类", value: "玉色" },
            { name: "品牌", value: "Queelin" }
        ]
    }

})


// {
//   desc:"清翠玉鏤雕鳳鳴在竹牌",
//   id: "4001880",
//   picture: "https://pic.imgdb.cn/item/6640b6ad0ea9cb14035bc43b.png",
//   price: "5890.00",
//   name: "清翠玉鏤雕鳳鳴在竹牌",
//   orderNum: 5071,
// {salesCount: 1788,
// commentCount: 0,
// collectCount: 0,
// brand:{
//     name:'传智自有品牌'
// },
// name: "给衣柜减减肥，真空防潮压缩袋"
// oldPrice:"79.00"
// price: "79.00",
// desc: "手动压缩，节省空间",
// details:{
//      properties:[{name:"材质",value:"其他"}{name:"颜色",value:"黑色"}{name:"适用对象",value: "衣物收纳、棉被收纳"}]
// }
// },
const addCart = () => {
    console.log(count);
}

</script>


<template>
    <div class="xtx-goods-page">
        <div class="container" v-if="goods.details">
            <!-- 商品信息 -->
            <div class="info-container">
                <div>
                    <div class="goods-info">
                        <div class="media">
                            <img :src="goods.picture" style="width:500px;height:300px" alt="">
                            <!-- 图片预览区 -->
                            <!-- <XtxImageView :image-list="goods.mainPictures"/> -->
                            <!-- 统计数量 -->
                            <ul class="goods-sales">
                                <li>
                                    <p>销量人气</p>
                                    <p> {{ goods.salesCount }}+ </p>
                                    <p><i class="iconfont icon-task-filling"></i>销量人气</p>
                                </li>
                                <li>
                                    <p>商品评价</p>
                                    <p>{{ goods.commentCount }}+</p>
                                    <p><i class="iconfont icon-comment-filling"></i>查看评价</p>
                                </li>
                                <li>
                                    <p>收藏人气</p>
                                    <p>{{ goods.collectCount }}+</p>
                                    <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
                                </li>
                                <li>
                                    <p>品牌信息</p>
                                    <p style="width: 100px;margin-left:5px">{{ goods.brand.name }}</p>
                                    <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
                                </li>
                            </ul>
                        </div>
                        <div class="spec">
                            <!-- 商品信息区 -->
                            <p class="g-name"> {{ goods.name }} </p>
                            <p class="g-desc">{{ goods.desc }} </p>
                            <p class="g-price">
                                <span>{{ goods.price }}</span>
                                <span> {{ goods.oldprice }}</span>
                            </p>
                            <div class="g-service">
                                <dl>
                                    <dt>促销</dt>
                                    <dd>12月好物放送，App领券购买直降120元</dd>
                                </dl>
                                <dl>
                                    <dt>服务</dt>
                                    <dd>
                                        <span>无忧退货</span>
                                        <span>快速退款</span>
                                        <span>免费包邮</span>
                                        <a href="javascript:;">了解详情</a>
                                    </dd>
                                </dl>
                            </div>
                            <!-- sku组件 -->
                            <!-- <XtxSku :goods="goods" @change="skuChange"/> -->
                            <!-- 数据组件 -->
                            <a-input-number v-model:value="count" :min="1" />
                            <!-- 按钮组件 -->
                            <div>
                                <a-button size="large" class="btn" @click="addCart">
                                    加入购物车
                                </a-button>
                            </div>

                        </div>
                    </div>
                    <div class="goods-footer">
                        <div class="goods-article">
                            <!-- 商品详情 -->
                            <div class="goods-tabs">
                                <nav>
                                    <a>商品详情</a>
                                </nav>
                                <div class="goods-detail">
                                    <!-- 属性 -->
                                    <ul class="attrs">
                                        <li v-for="item in goods.details.properties" :key="item.value">
                                            <span class="dt">{{ item.name }}</span>
                                            <span class="dd">{{ item.value }}</span>
                                        </li>
                                    </ul>
                                    <!-- 图片 -->
                                    <img v-for="img in goods.details.pictures" :src="img" :key="img" alt="">
                                </div>
                            </div>
                            <!-- 商品简介 -->
                            <div class="goods-warn">
                                <nav>
                                    <a>商品简介</a>
                                </nav>
                                <div class="font">
                                    {{ goods.details.details }}
                                </div>
                                <div class="font">
                                    <i>注意事项如下：</i>
                                    <br>
                                    {{ goods.details.notices }}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang='scss'>
ul {
    list-style: none;
}

.xtx-goods-page {
    .goods-info {
        min-height: 600px;
        background: #fff;
        display: flex;

        .media {
            width: 580px;
            height: 600px;
            padding: 30px 50px;
        }

        .spec {
            flex: 1;
            padding: 30px 30px 30px 0;
        }
    }

    .goods-footer {
        display: flex;
        margin-top: 20px;

        .goods-article {
            display: flex;
            justify-self: flex-end;
            // width: 940px;
            margin-right: 20px;
        }

        .goods-aside {
            width: 280px;
            min-height: 1000px;
        }
    }

    .goods-tabs {
        min-height: 600px;
        background: #fff;
    }

    .goods-warn {
        min-height: 600px;
        background: #fff;
        margin-top: 20px;
        width: 50%;
        padding: 100px;
        min-height: 600px;
        background: #fff;

        nav {
            height: 70px;
            line-height: 70px;
            display: flex;
            // border-bottom: 1px solid #f5f5f5;
            margin-top: -120px;
            font-size: 18px;
        }

        .font {
            margin: 30px;
            width: 450px;
            font: caption;
            line-height: 2em;
            text-indent: 2em;
        }

    }

    .number-box {
        display: flex;
        align-items: center;

        .label {
            width: 60px;
            color: #999;
            padding-left: 10px;
        }
    }

    .g-name {
        font-size: 22px;
    }

    .g-desc {
        color: #999;
        margin-top: 10px;
    }

    .g-price {
        margin-top: 10px;

        span {
            &::before {
                content: "¥";
                font-size: 14px;
            }

            &:first-child {
                color: #cf4444;
                margin-right: 10px;
                font-size: 22px;
            }

            &:last-child {
                color: #999;
                text-decoration: line-through;
                font-size: 16px;
            }
        }
    }

    .g-service {
        background: #f5f5f5;
        width: 500px;
        padding: 20px 10px 0 10px;
        margin-top: 10px;

        dl {
            padding-bottom: 20px;
            display: flex;
            align-items: center;

            dt {
                width: 50px;
                color: #999;
            }

            dd {
                color: #666;

                &:last-child {
                    span {
                        margin-right: 10px;

                        &::before {
                            content: "•";
                            color: #27ba9b;
                            margin-right: 2px;
                        }
                    }

                    a {
                        color: #27ba9b;
                    }
                }
            }
        }
    }

    .goods-sales {
        display: flex;
        width: 400px;
        align-items: center;
        text-align: center;
        height: 140px;

        li {
            flex: 1;
            position: relative;

            ~li::after {
                position: absolute;
                top: 10px;
                left: 0;
                height: 60px;
                border-left: 1px solid #e4e4e4;
                content: "";
            }

            p {
                &:first-child {
                    color: #999;
                }

                &:nth-child(2) {
                    color: #cf4444;
                    margin-top: 10px;
                }

                &:last-child {
                    color: #666;
                    margin-top: 10px;

                    i {
                        color: #27ba9b;
                        font-size: 14px;
                        margin-right: 2px;
                    }

                    &:hover {
                        color: #27ba9b;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

.goods-tabs {
    min-height: 600px;
    background: #fff;

    nav {
        height: 70px;
        line-height: 70px;
        display: flex;
        border-bottom: 1px solid #f5f5f5;

        a {
            padding: 0 40px;
            font-size: 18px;
            position: relative;

            >span {
                color: #cf4444;
                font-size: 16px;
                margin-left: 10px;
            }
        }
    }
}

.goods-detail {
    padding: 40px;

    .attrs {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;

        li {
            display: flex;
            margin-bottom: 10px;
            width: 50%;

            .dt {
                width: 100px;
                color: #999;
            }

            .dd {
                flex: 1;
                color: #666;
            }
        }
    }

    >img {
        width: 100%;
    }
}

.btn {
    margin-top: 20px;

}

.bread-container {
    padding: 25px 0;
}
</style>